<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>退货单明细表管理</title>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
<style>
body {
	margin: 10px;
}

.demo-carousel {
	height: 300px;
	line-height: 300px;
	text-align: center;
}

.demoTable {
	z-index: 10px;
}

#addReload {
	position: absolute;
	top: 0%;
	z-index: 100px;
	background: rgb(0, 0, 0, 0.9);
	width: 100%;
	height: 100%;
	display: none;
}

#addOperation {
	position: absolute;
	left: 30%;
	top: 0%;
	width: 40%;
	background: white;
}

#updateReload {
	position: absolute;
	top: 0%;
	z-index: 100px;
	background: rgb(0, 0, 0, 0.9);
	width: 100%;
	height: 100%;
	display: none;
}

#updateOperation {
	position: absolute;
	left: 30%;
	top: 0%;
	width: 40%;
	background: white;
}
</style>
</head>
<body>
	<div class="demoTable">
		搜索操作人：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn" id="memberAdd" data-type="add">增加</button>
		<table class="layui-hide" id="menber" lay-filter="demo"></table>
	</div>

	<div id="addReload">
		<div id="addOperation">
			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 20px;">
				<legend>退货单明细增加列表</legend>
			</fieldset>
			<form class="layui-form" action="../../detail/addOrUpdate.action"
				method="post">
				<div class="layui-form-item">
					<label class="layui-form-label">退货详细ID</label>
					<div class="layui-input-block">
						<input type="text" name="rdId" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入名称" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">退货ID</label>
					<div class="layui-input-block">
						<input type="text" name="reId" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">药品ID</label>
					<div class="layui-input-block">
						<input type="password" name="drugId" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">物品数量</label>
					<div class="layui-input-block">
						<input type="password" name="rdNumber" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">小计</label>
					<div class="layui-input-block">
						<input type="password" name="rdSubtotal" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">合计</label>
					<div class="layui-input-block">
						<input type="password" name="rdTotal" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
<!-- 				<div class="layui-form-item">
					<label class="layui-form-label">操作时间</label>
					<div class="layui-input-block">
						<input type="text" name="optime" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div> -->
				<div class="layui-form-item">
					<label class="layui-form-label">操作人</label>
					<div class="layui-input-block">
						<input type="text" name="oper" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否有效</label>
					<div class="layui-input-block" style="width: 200px;">
						<select name="isva" lay-verify="required" lay-search="">
							<option value="0">是</option>
							<option value="1">否</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序</label>
					<div class="layui-input-block">
						<input type="text" name="sort" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="submit" class="layui-btn" lay-submit=""
							lay-filter="roleAdd" value="提交">
						<button id="closeAdd" type="reset"
							class="layui-btn layui-btn-primary">取消</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div id="updateReload">
		<div id="updateOperation">
			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 20px;">
				<legend>订单详细修改列表</legend>
			</fieldset>
			<form class="layui-form" action="../../detail/addOrUpdate.action"
				method="post">
				
				<div class="layui-form-item">
					<label class="layui-form-label">退货详细ID</label>
					<div class="layui-input-block">
						<input type="text" id="rdId" name="rdId" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入名称" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">退货ID</label>
					<div class="layui-input-block">
						<input type="text" id="reId" name="reId" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">药品ID</label>
					<div class="layui-input-block">
						<input type="password" id="drugId" name="drugId" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">物品数量</label>
					<div class="layui-input-block">
						<input type="password" name="rdNumber" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">小计</label>
					<div class="layui-input-block">
						<input type="password" name="rdSubtotal" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">合计</label>
					<div class="layui-input-block">
						<input type="password" name="rdTotal" lay-verify="required"
							maxlength="18" min="6" placeholder="请输入密码" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
<!-- 				<div class="layui-form-item">
					<label class="layui-form-label">操作时间</label>
					<div class="layui-input-block">
						<input type="text" name="optime" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div> -->
				<div class="layui-form-item">
					<label class="layui-form-label">操作人</label>
					<div class="layui-input-block">
						<input type="text" name="oper" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否有效</label>
					<div class="layui-input-block" style="width: 200px;">
						<select name="isva" lay-verify="required" lay-search="">
							<option value="0">是</option>
							<option value="1">否</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序</label>
					<div class="layui-input-block">
						<input type="text" name="sort" maxlength="18" min="6"
							lay-verify="required" placeholder="请输入账号" autocomplete="off"
							class="layui-input" style="width: 280px;">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="submit" class="layui-btn" lay-submit=""
							lay-filter="roleAdd" value="提交">
						<button id="closeUpdate" type="reset"
							class="layui-btn layui-btn-primary">取消</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit" id="imgUpdate">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

	<script src="../../res/js/jquery-1.10.2.js"></script>
	<script src="../../res/js/layui-xtree.js"></script>
	<script src="../../res/mln/layui.js"></script>
	<script src="../../res/js/base.js"></script>
	<script>

layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element','tree'], function(){
  var form = layui.form
  ,laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
  var path=getRootPath();
  //上传文件
  var uploadInst = upload.render({
      elem: '#upload1' //绑定元素
      ,url: path+'member/uploadFile.action' //上传接口
      ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
        	  
              $('#demoOne').attr('src', result); //图片链接（base64）
          });
      }
      ,done: function(res){
          //如果上传失败
          if(res.code > 0){
              return layer.msg('上传失败');
          }
          //上传成功
          document.getElementById("img_url").value = res.url;

      }
      ,error: function(){
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
              uploadInst.upload();
          });
      }
  });
  //上传文件
  var uploadInsts = upload.render({
      elem: '#uploadTwo' //绑定元素
      ,url: path+'member/uploadFile.action' //上传接口
      ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
        	  
              $('#demoTow').attr('src', result); //图片链接（base64）
          });
      }
      ,done: function(res){
          //如果上传失败
          if(res.code > 0){
              return layer.msg('上传失败');
          }
          //上传成功
          document.getElementById("img_urlTwo").value = res.url;

      }
      ,error: function(){
          //演示失败状态，并实现重传
          var demoText = $('#demoTextTwo');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
        	  uploadInsts.upload();
          });
      }
  });
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.msg('切换了：'+ this.innerHTML);
    console.log(data);
  });
  
  //执行一个 table 实例
  table.render({
     elem: '#menber'
    ,async: false
    ,height: 474
    ,url: path+'detail/detailFindAll.action' //数据接口
    ,page: true //开启分页
    ,method:'post'
    ,cols: [[ //表头
       {field: 'rdId', title: '退货详细ID', width:120 }
      ,{field: 'reId', title: '退货ID', width:120}
      ,{field: 'drugId', title: '药品ID', width:120}
      ,{field: 'rdNumber', title: '物品数量', width:120}
      ,{field: 'rdSubtotal', title: '小计', width:120}
      ,{field: 'rdTotal', title: '合计', width:120}
      ,{field: 'optime', title: '操作时间', width:120}
      ,{field: 'oper', title: '操作人', width:120}
      ,{field: 'isva', title: '是否有效', width:120}
      ,{field: 'sort', title: '排序', width:120}
      ,{fixed: 'right',title: '操作', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  	,id: 'testReload'
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'del'){
      var id=data.rdId;
      layer.confirm('确认删除？', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //使用jquery的ajax方式向后台提交数据
		var url = path+"detail/deleteDetail.action";
		var data={id:id};
			$.post(url,data,function(data){
				
				if(data=="ok"){
					layer.msg('删除成功', {
						  icon: 1,
						  time: 1000 //1秒关闭（如果不配置，默认是3秒）
						}, function(){
						  
					});
				}
			});
      	});
    } else if(layEvent === 'edit'){
	      
	      $("#reId").val(data.reId);
	      
	      $("#drugId").val(data.drugId);
	      $("#rdNumber").val(data.rdNumber);
	      $("#rdSubtotal").val(data.rdSubtotal);
	      $("#rdTotal").val(data.rdTotal);
	      $("#optime").val(data.optime);
	      $("#oper").val(data.oper);
	      $("#isva").val(data.isva);
	      $("#sort").val(data.sort);
	      
	      var m=$("#isva").children().next();
	      var n=$("#isva").children();
	      
	      if(m.val()==data.memberSort){      
	         m.attr("selected",true);
	      }else{
	    	 n.attr("selected",true);
	      }
	      form.render("select");
	      $('#updateReload').css('display','block');
		}
	});

		//条件查询
		var $ = layui.$;

		$('.demoTable .layui-btn').on('click', function() {
			var demoReload = $('#demoReload');
			//执行重载
			table.reload('testReload', {
				page : {
					curr : 1
				//重新从第 1页开始
				},
				where : {
					oper : demoReload.val()
				}
			});
		});
		$('#closeAdd').on('click', function() {
			$('#addReload').css('display', 'none');
		});
		$('#closeUpdate').on('click', function() {
			
			$('#updateReload').css('display', 'none');
		});
		
		$('#memberAdd').on('click', function() {
			$('#addReload').css('display', 'block');
			
		});

	});
</script>
</body>
</html>